// 大屏自适应工具
import { ref, onMounted, onUnmounted } from 'vue'

/**
 * 大屏自适应Hook
 * @param {number} designWidth 设计稿宽度，默认1920
 * @param {number} designHeight 设计稿高度，默认1080
 */
export const useScreenAdapter = (designWidth = 1920, designHeight = 1080) => {
  const scale = ref(1)
  const screenWidth = ref(window.innerWidth)
  const screenHeight = ref(window.innerHeight)

  const updateScale = () => {
    const currentWidth = window.innerWidth
    const currentHeight = window.innerHeight
    
    screenWidth.value = currentWidth
    screenHeight.value = currentHeight

    const scaleX = currentWidth / designWidth
    const scaleY = currentHeight / designHeight
    
    // 使用较小的缩放比例，确保内容完全显示
    scale.value = Math.min(scaleX, scaleY)
  }

  const handleResize = () => {
    updateScale()
  }

  onMounted(() => {
    updateScale()
    window.addEventListener('resize', handleResize)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
  })

  return {
    scale,
    screenWidth,
    screenHeight
  }
}

/**
 * 获取响应式字体大小
 * @param {number} baseFontSize 基础字体大小
 * @param {number} scale 缩放比例
 */
export const getResponsiveFontSize = (baseFontSize, scale) => {
  return Math.max(12, baseFontSize * scale) + 'px'
}

/**
 * 获取响应式尺寸
 * @param {number} baseSize 基础尺寸
 * @param {number} scale 缩放比例
 */
export const getResponsiveSize = (baseSize, scale) => {
  return baseSize * scale + 'px'
}
